<template>
  <SnelPage :config="pageConfig" ref="page">
    <!-- S pagebg -->
    <div class="pagebg">
      <div class="pic"><img src="../assets/images/demopic/pic-1920X1080.jpg" width="1920" height="1080" /></div>
    </div>
    <!-- E pagebg -->
    <!-- S content -->
    <div class="wrapper w-contentCover">
      <div class="w-head-cover" v-show="translate"><!--头部遮罩 默认隐藏--></div>
      <!-- <div class="w-headwrap" style="top: -90px"> -->
      <div class="w-headwrap" :style="{ transition: `all ${$refs.page && $refs.page.firstLoad ? 0 : 300}ms`, transform: `translate3d(0,${translate ? -90 : 0}px,0)` }">
        <!--当头部隐藏只剩导航时， 则加上 style="top: -90px;"-->
        <!-- S head -->
        <div class="logo"><img src="../assets/images/logo.png" /></div>
        <SnelArea class="w-headBtn">
          <div class="item ui-breathLight-element">
            <div class="icon"><img src="../assets/images/w-icon-toup.png" /></div>
            <div class="txt">投屏</div>
          </div>
          <div class="item ui-breathLight-element" style="left: 150px">
            <div class="icon"><img src="../assets/images/w-icon-search.png" /></div>
            <div class="txt">搜索</div>
          </div>
          <div class="item ui-breathLight-element" style="left: 300px">
            <div class="icon"><img src="../assets/images/w-icon-my.png" /></div>
            <div class="txt">我的</div>
            <div class="point"></div>
          </div>
        </SnelArea>
        <div class="time">20:25</div>
        <SnelArea class="w-menu" :config="area1Config">
          <div class="item">
            <div class="link"></div>
            <div class="txt-wrap txt-wrap01">
              <div class="txt">频道</div>
            </div>
          </div>
          <div class="item" style="left: 200px">
            <div class="link"></div>
            <div class="txt-wrap txt-wrap01">
              <div class="txt">少儿</div>
            </div>
          </div>
          <div class="item" style="left: 400px">
            <div class="link"></div>
            <div class="txt-wrap txt-wrap01">
              <div class="txt">推荐</div>
            </div>
          </div>
          <div class="item" style="left: 600px">
            <div class="link"></div>
            <div class="txt-wrap txt-wrap01">
              <div class="txt">电影</div>
            </div>
          </div>
          <div class="item" style="left: 800px">
            <div class="link"></div>
            <div class="txt-wrap txt-wrap02">
              <div class="txt">电视剧</div>
            </div>
          </div>
          <div class="item" style="left: 1036px">
            <div class="link"></div>
            <div class="txt-wrap txt-wrap01">
              <div class="txt">综艺</div>
            </div>
          </div>
          <div class="item" style="left: 1236px">
            <div class="link"></div>
            <div class="txt-wrap txt-wrap01">
              <div class="txt">纪实</div>
            </div>
          </div>
          <div class="item" style="left: 1436px">
            <div class="link"></div>
            <div class="txt-wrap txt-wrap01">
              <div class="txt">体育<!--游戏--></div>
            </div>
          </div>
          <div class="item" style="left: 1636px">
            <div class="link"></div>
            <div class="txt-wrap txt-wrap01">
              <div class="txt">生活<!--教育--></div>
            </div>
          </div>
        </SnelArea>
        <!-- E head -->
      </div>
      <!-- S 滑屏 index -->
      <div class="w-indexContent">
        <div class="scrollBox" id="container">
          <!-- 通过top值实现上下滑屏, 第二屏为-630px; 第三屏为-1360px; 第四屏-1890px； 第5屏-2220px；-->
          <!-- S 首屏 -->
          <SnelArea :config="area2Config">
            <div class="w-listAll w-list01">
              <div class="item ui-breathLight-element">
                <div class="pic"><img src="../assets/images/demopic/pic-846X390.jpg" /></div>
                <div class="txt-wrap">
                  <div class="txt txt01">闪电侠</div>
                  <div class="txt txt02">该片根据1985年俄罗斯“礼炮7号”救援事件改编</div>
                </div>
                <div class="play"></div>
              </div>
            </div>
            <div class="w-listAll w-list02">
              <div class="item ui-breathLight-element">
                <div class="pic"><img src="../assets/images/demopic/pic-406X390.jpg" /></div>
                <div class="txt-wrap txt-wrap01">
                  <div class="txt">火星救援</div>
                </div>
                <div class="play"></div>
              </div>
            </div>
            <div class="w-listAll w-list03">
              <div class="item ui-breathLight-element">
                <div class="pic"><img src="../assets/images/demopic/pic-406X180.jpg" /></div>
                <div class="txt-wrap">
                  <div class="txt">等风来</div>
                </div>
                <div class="play"></div>
              </div>
              <div class="item ui-breathLight-element" style="top: 210px">
                <div class="pic"><img src="../assets/images/demopic/pic-406X180.jpg" /></div>
                <div class="txt-wrap">
                  <div class="txt">会到爱开始的地方</div>
                </div>
                <div class="play"></div>
              </div>
            </div>
          </SnelArea>
          <SnelArea class="w-list-look" :config="area3Config">
            <!-- <div class="icon"><img src="../assets/images/w-icon-lookkeyBack.png" /></div> -->
            <div class="title-s">观看历史</div>
            <div class="item ui-breathLight-element">
              <div class="txt-wrap txt-wrap01">
                <div class="bar bounceoutR" style="width: 68%"></div>
                <div class="txt txt01">致命指令</div>
                <div class="txt txt02">观看至68%</div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="top: 144px">
              <div class="txt-wrap txt-wrap02">
                <div class="bar" style="width: 100%"></div>
                <div class="txt txt01">终结者3终结者3终结者3终结者3</div>
                <div class="txt txt02">观看至100%</div>
              </div>
            </div>
          </SnelArea>
          <SnelArea class="w-listAll w-list04" :config="area4Config">
            <div class="item ui-breathLight-element">
              <div class="pic"><img src="../assets/images/pic-187X216-1.png" /></div>
            </div>
            <div class="item ui-breathLight-element" style="left: 216px">
              <div class="pic"><img src="../assets/images/pic-187X216-2.png" /></div>
            </div>
          </SnelArea>
          <SnelArea class="w-listAll w-list05" :config="area5Config">
            <div class="item ui-breathLight-element">
              <div class="pic"><img src="../assets/images/demopic/pic-406X216.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt">火星救援</div>
              </div>
              <div class="play"></div>
            </div>
            <div class="item ui-breathLight-element" style="left: 437px">
              <div class="pic"><img src="../assets/images/demopic/pic-406X216.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt">火星救援</div>
              </div>
              <div class="play"></div>
            </div>
          </SnelArea>
          <!-- E 首屏  -->
          <!-- S 精彩推荐  -->
          <div class="title">热门电视剧</div>
          <SnelArea class="w-listAll w-list06" :config="area6Config" ref="area6">
            <div class="item ui-breathLight-element" v-if="rest">
              <div class="icon icon-free"></div>
              <div class="pic"><img src="../assets/images/demopic/pic-846X365.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt txt01">刺客信条</div>
                <div class="txt txt02">该片根据1985年俄罗斯“礼炮7号”救援事件改编</div>
              </div>
              <div class="play"></div>
            </div>
            <div class="item ui-breathLight-element" style="left: 876px" v-if="rest">
              <div class="icon icon-free"></div>
              <div class="pic"><img src="../assets/images/demopic/pic-846X365.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt txt01">刺客信条刺客信条刺客信条刺客信条刺客信条刺客信条刺客信条</div>
                <div class="txt txt02">该片根据1985年俄罗斯“礼炮7号”救援事件改编</div>
              </div>
              <div class="play"></div>
            </div>
          </SnelArea>
          <SnelArea class="w-listAll w-list07">
            <div class="item ui-breathLight-element">
              <div class="pic"><img src="../assets/images/demopic/pic-407X228.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">刺客信条刺客信条刺客信条刺客信条刺客信条</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 437px">
              <div class="pic"><img src="../assets/images/demopic/pic-407X228.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">刺客信条</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 876px">
              <div class="pic"><img src="../assets/images/demopic/pic-407X228.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">刺客信条</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 1311px">
              <div class="pic"><img src="../assets/images/demopic/pic-407X228.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">刺客信条</div>
                <div class="play"></div>
              </div>
            </div>
          </SnelArea>
          <!-- E 精彩推荐  -->
          <!-- S 即将上映  -->
          <div class="title" style="top: 1497px">即将上映</div>
          <div class="w-onlist">
            <div class="txt" style="left: 80px">明天上映<span></span></div>
            <div class="txt" style="left: 350px">明天上映<span></span></div>
            <div class="txt" style="left: 620px">明天上映<span></span></div>
            <div class="txt" style="left: 890px">明天上映<span></span></div>
            <div class="txt" style="left: 1160px">明天上映<span></span></div>
            <div class="txt" style="left: 1430px">明天上映<span></span></div>
            <div class="line"></div>
          </div>
          <SnelArea class="w-listAll w-list08">
            <div class="item ui-breathLight-element">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
              <!--<div class="btn btn_focus">预约</div>-->
            </div>
            <div class="item ui-breathLight-element" style="left: 292px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你归还世界给你归还世界给你归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 584px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 876px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 1168px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 1460px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
          </SnelArea>
          <!-- E 精彩推荐  -->
          <!-- S 热门专题  -->
          <div class="title" style="top: 2162px">热门专题</div>
          <SnelArea class="w-listAll w-list09">
            <!--图片尺寸和2-list07一样-->
            <div class="item ui-breathLight-element">
              <div class="pic"><img src="../assets/images/demopic/pic-407X228-2.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt">刺客信条</div>
              </div>
              <div class="play"></div>
            </div>
            <div class="item ui-breathLight-element" style="left: 437px">
              <div class="pic"><img src="../assets/images/demopic/pic-407X228-2.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt">刺客信条</div>
              </div>
              <div class="play"></div>
            </div>
            <div class="item ui-breathLight-element" style="left: 875px">
              <div class="pic"><img src="../assets/images/demopic/pic-407X228-2.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt">刺客信条</div>
              </div>
              <div class="play"></div>
            </div>
            <div class="item ui-breathLight-element" style="left: 1312px">
              <div class="pic"><img src="../assets/images/demopic/pic-407X228-2.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt">刺客信条</div>
              </div>
              <div class="play"></div>
            </div>
          </SnelArea>
          <!-- E 热门专题  -->
          <!-- S 精选推荐  -->
          <div class="title" style="top: 2522px">精选推荐</div>
          <SnelArea class="w-listAll w-list10">
            <div class="item ui-breathLight-element">
              <div class="icon icon-free"></div>
              <div class="pic"><img src="../assets/images/demopic/pic-553X309.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt txt01">战狼2</div>
                <div class="txt txt02">该片根据1985年俄罗斯“礼炮7号”救援事件改编</div>
              </div>
              <div class="play"></div>
            </div>
            <div class="item ui-breathLight-element" style="left: 583px">
              <div class="pic"><img src="../assets/images/demopic/pic-553X309.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt txt01">战狼2</div>
                <div class="txt txt02">该片根据1985年俄罗斯“礼炮7号”救援事件改编</div>
              </div>
              <div class="play"></div>
            </div>
            <div class="item ui-breathLight-element" style="left: 1166px">
              <div class="pic"><img src="../assets/images/demopic/pic-553X309.jpg" /></div>
              <div class="txt-wrap">
                <div class="txt txt01">战狼2</div>
                <div class="txt txt02">该片根据1985年俄罗斯“礼炮7号”救援事件改编</div>
              </div>
              <div class="play"></div>
            </div>
          </SnelArea>
          <SnelArea class="w-listAll w-list08" style="top: 2938px">
            <div class="item ui-breathLight-element">
              <div class="icon icon-free"></div>
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 292px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 584px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 876px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 1168px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
            <div class="item ui-breathLight-element" style="left: 1460px">
              <div class="pic"><img src="../assets/images/demopic/pic-262X367.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt">归还世界给你</div>
                <div class="play"></div>
              </div>
            </div>
          </SnelArea>
          <!-- E 精选推荐  -->
          <!-- S 底部  -->
          <SnelArea class="w-bottomBtn">
            <div class="item ui-breathLight-element">
              <div class="icon"><img src="../assets/images/w-icon-top.png" /></div>
              <div class="txt">返回顶部</div>
            </div>
            <div class="item ui-breathLight-element" style="left: 275px">
              <div class="icon" style="left: 46px"><img src="../assets/images/w-icon-s.png" /></div>
              <div class="txt" style="left: 87px">搜索</div>
            </div>
          </SnelArea>
          <!-- S 底部  -->
        </div>
      </div>
      <!-- E 滑屏 index -->
    </div>
    <!-- E content -->
    <!-- S 弹出层 二维码 -->
    <div class="w-pop-erweima">
      <!-- 默认隐藏  显示block -->
      <div class="pic" style="left: 570px; top: 255px; z-index: 1"><img src="../assets/images/pic-erweima.png" width="338" height="384" /></div>
      <div class="pic" style="left: 570px; top: 586px; z-index: 2"><img src="../assets/images/w-erweima-covertxt.png" width="338" height="75" /></div>
      <div class="txt" style="left: 570px; top: 765px; font-size: 26px; width: 800px; height: 30px; line-height: 30px">用微信扫描二维码连结TV伴侣</div>
    </div>
    <!-- E 弹出层 二维码 -->
  </SnelPage>
</template>

<script>
import '@/assets/css/reset.css';
import '@/assets/css/index.css';
export default {
  name: 'Index',
  data() {
    return {
      translate: 0,
      rest: false,
      /** @type {SnelPage} */
      pageConfig: {
        areaId: 2,
        areaIndex: 0,
        slide: {
          containerId: 'container',
          bottom: -20,
          values: [0, 0, 0, 0, 0, 0, -658, -1017, -1608, -2063, -2465, -2760, -2760],
          condition: (page, val) => {
            this.translate = val;
            return true;
          },
        },
        // border(page, dir) {
        //   console.log('page, dir: ', page, dir);
        // },
        // focusAfter({ currentAreaId, currentIndex }) {
        //   console.log('id: ', currentAreaId);
        //   console.log('index: ', currentIndex);
        // },
      },
      /** @type {SnelArea} */
      area1Config: {
        record: true,
        initRecord: 2,
        select: true,
      },
      /** @type {SnelArea} */
      area2Config: {
        outMoveDir: [1, -1, [3, 4, 5], -1],
      },
      /** @type {SnelArea} */
      area3Config: {
        outMoveDir: [2, -1, 6, 4],
      },
      /** @type {SnelArea} */
      area4Config: {
        outMoveDir: [2, 3, 6, 5],
      },
      /** @type {SnelArea} */
      area5Config: {
        outMoveDir: [2, 4, 6, -1],
      },
      /** @type {SnelArea} */
      area6Config: {
        outMoveDir: [[3, 4, 5], -1, 7, -1],
      },
    };
  },
  mounted() {
    this.$refs.page.init();
    setTimeout(() => {
      this.rest = true;
      // this.$refs.area6.init();
      // this.$refs.page.init();
    }, 5000);
  },
};
</script>
